<script setup>
import { ref} from 'vue'
import ChildB from './ChildB.vue'
import ChildC from './ChildC.vue'
import ChildD from './ChildD.vue'
import Capitalize from './Capitalize.vue'
import TitleCapitalize from './TitleCapitalize.vue'
import MyButton from './Button.vue'

const fontSize = ref(1)

const searchText = ref('我是父消息')

const bookTitle = ref({
  name: '',
  age: 12
})

const firstName = ref('')
const lastName = ref('')

const myText = ref('')

function onClick() {
  console.log('我被点击了');
}
function give() {
  console.log('我是give');
  return 3
}
</script>

<template>
  <div :style="{ fontSize: fontSize + 'em' }">
  {{ searchText }}
  <!-- 当使用在一个组件上时，v-model是这样做的 -->
    <ChildA :modelValue="searchText" @update:modelValue="newValue => searchText = newValue" />
    <!-- 为了使组件能像这样工作，内部的 <input> 组件必须：绑定 value 属性到 modelValue prop，输入新的值时在 input 元素上触发 update:modelValue 事件 -->
    <ChildA v-model="searchText" />
    <ChildB v-model="searchText" />

    <!-- v-model的参数：默认情况下，v-model在组件上都是使用 modelValue 作为prop，以update:modelValue 作为对应的事件，可以通过给 v-model 指定一个参数来更改这些名字 -->
    <br />
    <p>bookTitle: {{ bookTitle }}</p>
    <childC v-model:title="bookTitle" />
    <!-- 多个v-model绑定：利用一个特定的 prop 和一个特定事件，可以在一个组件上创建多个 v-model 双向绑定。每一个 v-model 都会同步不同的 prop，而不需要在组件上写更多的额外的选项 -->
    <p>firstName: {{ firstName }}, lastName: {{ lastName }}</p>
    <ChildD v-model:first-name="firstName" v-model:last-name="lastName" />
    <!-- 创建一个自定义修饰符 capitalize，自动将v-model绑定输入的字符串值第一个字母转为大写 -->
    <br />
    <p>myText: {{ myText }}</p>
    <Capitalize v-model.capitalize="myText" />
    <TitleCapitalize class="new-class" v-model:title.capitalize="myText" />
    <br />
    <MyButton name="name" title="title" @give="give" @click="onClick" />
  </div>
</template>

<style scoped>
</style>
